import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react'
import { Row, Col, Segmented, Button, Select } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import SelectStage from '@/components/StageConfigurationSetting'
import Modal from './components/Model'
const PreApplition = (props, ref) => {
  const {
    defaultList = [],
    dispatch
  } = props
  const [stage, setStage] = useState('null')
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const [stageBaseList, setStageBaseList] = useState([])
  const fetchBase = () => {
    dispatch({
      type: 'user/fetchListStageInfoBase',
      payload: {
        queryFor: 'addUser'
      },
      callback: (e = []) => {
        const { stageInfoList = [] } = e
        setStageBaseList(stageInfoList)
      }
    })
  }
  useEffect(() => {
    fetchBase()
  }, [])
  useImperativeHandle(ref, () => {
    return {
      getPre: () => {
        return data.map(val => {
          const { id, stage, workType } = val
          return {
            adminId: id,
            stage,
            workType
          }
        })
      }
    }
  })
  useEffect(() => {
    setData(defaultList)
  }, [defaultList.length])

  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '负责类型',
      dataIndex: 'workType',
      render: (e, record) => {
        return <Select style={{ width: 100 }} onChange={(e) => {
          setData(data.map(item => {
            const {
              stageAdminId
            } = item
            if (stage === item.stage && stageAdminId == record.stageAdminId) {
              return {
                ...item,
                workType: e
              }
            } else {
              return item
            }

          }))

        }} value={e} options={[{
          label: '主服务', value: 'main'
        }, {
          label: '协助服务', value: 'help'
        }]}></Select>
      }
    },
  ]
  const onChange = (e) => {
    setData([
      ...data.filter(val => {
        if (val.stage !== stage) {
          return true
        } else {
          return false
        }
      }),
      ...e.map((item) => {
        return {
          ...item,
          stageAdminId: item.id
        }
      })
    ])
  }
  const filterBaseList = stageBaseList.reduce((item, val) => {
    const {
      subStageInfoList = [],
      stageInfo = {}
    } = val
    const { stageIdentification } = stageInfo
    return [
      ...item,
      {
        ...val,
        stageInfo: {
          ...stageInfo,
          baseStageFlag: '1',
          mainStage: '',
        }
      },
      ...subStageInfoList.map(c => {
        return {
          stageInfo: {
            ...c,
            mainStage: stageIdentification
          }
        }
      }),
    ]
  }, [])
  const memo = useMemo(() => {

    return <Row gutter={[12, 24]}>
      <Col style={{ textAlign: 'right', paddingRight: 4 }} span={6}>阶段负责人设置：</Col>
      <Col span={18}>
        <SelectStage showType='Button' onChange={(e) => {
          setStage(e)
        }} data={filterBaseList}></SelectStage>
      </Col>
      <Col span={16} offset={3}>
        <TableDataBlock
          cardProps={{
            title: '设置负责人', extra: <Button onClick={() => {
              setVisible({
                show: true, detail: {
                  stage, list: data.filter(item => {
                    return item.stage === stage
                  }), disabledList: defaultList,
                }
              })
            }}>设置</Button>
          }}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={data.filter((val => {
            return val.stage === stage
          }))}
        ></TableDataBlock>
      </Col>
      <Modal onChange={(e, detail) => onChange(e, detail)} visible={visible} onClose={() => {
        setVisible(false)
      }}></Modal>
    </Row>


  }, [stage, data, visible, defaultList, stageBaseList])
  return memo

}
export default forwardRef(PreApplition) 